<template>
  <div>
    <!-- 模糊查询 -->
    <div>
      <el-form :inline="true" :model="enterForm" :rules="rules" ref="enterForm" class="demo-form-inline">
      <el-form-item label="姓名" prop="enterName">
        <el-input v-model="enterForm.enterName" placeholder="报名学生姓名" ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('enterForm')">查询</el-button>
      </el-form-item>
    </el-form>
    </div>

    <div>

      <el-table
      ref="multipleTable"
       :data="tableData.list"
       style="width: 100%"
       tooltip-effect="dark"
       stripe
        @selection-change="handleSelectionChange">
        <el-table-column
        type="selection"
        prop="enterId"
        width="55">
      </el-table-column>
       <el-table-column
         prop="enterId"
         label="报名编号"
         >
       </el-table-column>
       <el-table-column
         prop="enterIdcard"
         label="身份证号"
         >
       </el-table-column>
       <el-table-column
         prop="enterName"
         label="姓名"
         >
       </el-table-column>
       <el-table-column
         prop="enterSex"
         label="性别"
         >
       </el-table-column>
       <el-table-column
         prop="enterPhone"
         label="联系方式"
         >
       </el-table-column>
       <el-table-column
         prop="enterGraduate"
         label="毕业学校"
         >
       </el-table-column>
       <el-table-column
         prop="sd"
         label="应缴金额"
         >
         <template slot-scope="scope">
           <span>{{sd}}</span>
         </template>
       </el-table-column>
       <el-table-column
         prop="enterPayMoney"
         label="实缴金额"
         >
       </el-table-column>

       <el-table-column
         prop="enterDelete"
         :formatter="formatterColumn"
         label="审核状态"
         >
       </el-table-column>

       <el-table-column
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-popover
            ref="popover2"
            placement="bottom"

            trigger="click">
            <div style="margin: 10;">
            <el-radio-group v-model="scope.row.enterDelete" size="small" @change="handleClick(scope.row.enterId,scope.row.enterDelete)">
              <el-radio-button label= 1 size="small" >审核通过</el-radio-button>
              <el-radio-button label= 2 size="small" >审核未通过</el-radio-button>
            </el-radio-group>
          </div>
          </el-popover>
          <el-button type="text" v-popover:popover2 @click="enterDelId='scope.row.enterDelete'">审 核</el-button>
        </template>
      </el-table-column>
     </el-table>

    </div>

    <!-- 分页 -->
    <div>
      <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage3"
            :page-size="tableData.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="tableData.total">
        </el-pagination>
    </div>

  </div>
</template>

<style>
.el-table th{
  text-align: center;
}
</style>

<script>
import {queryEnterFy} from '@/axios/api'
import {queryEnterUp} from '@/axios/api'
export default {
  data() {
    return {
      enterDelId:'',
      sd:'10000',
      tableData: {
        list:[{
          enterPayWay: '10000'
        }]
      },
       multipleSelection: [],

      visible2: false,

      currentPage3: 1,
      pageIndex: 1,

      enterForm: {
        enterName: ''

      },

      rules: {
       enterName: [
         // { required: true, message: '请输入查询ID', trigger: 'blur' },
         // { min: 3, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
       ]
    }
    }
  },
  methods: {
    //状态改成汉字
        formatterColumn(row, column) {
          if (row.enterDelete == 1) {
            console.log(row.enterDelete);
          };

            switch(row.enterDelete){
                case "1":
                return '审核通过';
                break;

                case 1:
                return '审核通过';
                break;

                case '0':
                return '待审核';
                break;

                case '2':
                return '审核未通过';
                break;
                case 0:
                return '待审核';
                break;

                case 2:
                return '审核未通过';
                break;

                default:
                return '未知';
            }
        },
    /**
     * 全选
     */
    toggleSelection(rows) {

            if (rows) {
              rows.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(row);
              });
            } else {
              this.$refs.multipleTable.clearSelection();
            }
          },
          handleSelectionChange(val) {
            this.multipleSelection = val;
          },
          /**
           * 模糊查询
           */
          submitForm(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                let params = {pageIndex:this.pageIndex,enterName:this.enterForm.enterName};
                queryEnterFy(params).then(res =>{
                  this.tableData = res.resData;
                  console.log(this.enterForm);
                });
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          },
          /**
           * 修改审核
           */
          handleClick(id,val) {
            //alert(id);
            //alert(val);
            if (val == 1) {
              this.$alert('审核通过将移除！', '重要提示', {
              confirmButtonText: '确定',
              callback: action => {
                if (action == 'confirm') {
                  let params = {enterId:id,enterDelete:val};
                  queryEnterUp(params).then(res =>{
                    console.log(res);
                    if (res.status == '200') {
                      this.$message({
                        message: res.message,
                        type: 'success'
                      });
                    }

                  })
                }else {
                  this.handleCurrentChange(this.pageIndex);
                }

              }
            });
          }else {
            let params = {enterId:id,enterDelete:val};
            queryEnterUp(params).then(res =>{
              console.log(res);
              if (res.status == '200') {
                this.$message({
                  message: res.message,
                  type: 'success'
                });
              }

            })
          }


          },
          clickMessage(){
            this.$alert('审核通过将移除！', '最要提示', {
            confirmButtonText: '确定',
            callback: action => {
              this.$message({
                type: 'info',
                message: `${ action }`
              });
            }
          });
        },

          /**
           * 分页
           */
          handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      let params = {pageIndex:val,enterName:this.enterForm.enterName}
      queryEnterFy(params).then(res =>{
        console.log(res);
      this.tableData =  res.resData
      })
    },

},
mounted(){
  this.handleCurrentChange(this.pageIndex)
}
}

</script>
